<template>
  <!-- 首页-关于我们 -->
  <div class="about" v-if="data.length">
    <div class="aboutPc">
      <img class="title" src="@/assets/image/about/about_title.png" />
      <div class="box">
        <div class="header">
          <div class="name">{{ getNavInfo("newsIndex").name }}</div>
          <div class="en">{{ getNavInfo("newsIndex").description }}</div>
        </div>
        <div class="line"></div>
        <div class="content">
          <toNews :detail="data[0]" class="left">
            <img class="img" :src="data[0]?.webimages" />
            <div class="left-title">{{ data[0]?.name }}</div>
            <div class="describe">
              {{ data[0]?.description }}
            </div>
          </toNews>
          <div class="center">
            <toNews :detail="data[1]" class="card">
              <img class="img" :src="data?.[1]?.webimages" />
              <div class="text">{{ data?.[1]?.name }}</div>
            </toNews>
            <toNews :detail="data[2]" class="card">
              <img class="img" :src="data?.[2]?.webimages" />
              <div class="text">{{ data?.[2]?.name }}</div>
            </toNews>
          </div>
          <div class="right">
            <toNews
              :detail="item"
              class="news"
              v-for="item in aboutList"
              :key="item"
            >
              <div class="text">
                {{ item.name }}
              </div>
              <div class="b-line"></div>
            </toNews>
            <router-link to="/newsIndex">
              <more-detail style="margin-top: 10px" name="查看更多" />
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="aboutM">
      <img class="title" src="../assets/image/about/about_title.png" />
      <div class="box">
        <div class="header">
          <div class="name">{{ getNavInfo("newsIndex").name }}</div>
          <div class="en">{{ getNavInfo("newsIndex").description }}</div>
        </div>
        <div class="line"></div>
        <div class="content">
          <toNews :detail="data[0]" class="left">
            <img class="img" :src="data?.[0]?.mobileimages" />
            <div class="left-title">{{ data?.[0]?.name }}</div>
            <div class="describe">
              {{ data?.[0]?.description }}
            </div>
          </toNews>
          <div class="center">
            <toNews :detail="data[1]" class="card">
              <img class="img" :src="data?.[1]?.mobileimages" />
              <div class="text">{{ data?.[1]?.name }}</div>
            </toNews>
            <toNews :detail="data[2]" class="card">
              <img class="img" :src="data?.[2]?.mobileimages" />
              <div class="text">{{ data?.[2]?.name }}</div>
            </toNews>
          </div>
        </div>
        <div class="right">
          <toNews
            :detail="item"
            class="news"
            v-for="item in aboutList"
            :key="item"
          >
            <div class="text">
              {{ item.name }}
            </div>
            <div class="b-line"></div>
          </toNews>
          <router-link
            to="/newsIndex"
            style="display: flex; justify-content: center"
          >
            <more-detail style="margin-top: 10px" name="查看更多" />
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import toNews from "@/components/toNews";
import { mapGetters } from "vuex";
export default {
  components: { toNews },
  computed: {
    ...mapGetters("common", ["getNavInfo"]),
  },
  props: {
    data: Array,
    aboutList: Array,
  },

  data() {
    return {};
  },

  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.aboutM {
  display: none;
}

.aboutPc {
  display: flex;
  height: 860px;
  flex-direction: column;
  align-items: center;

  .title {
    margin-top: 76px;
    width: 300px;
    height: 100px;
  }

  .box {
    margin-top: 88px;
    width: 1200px;

    .header {
      height: 40px;
      display: flex;
      align-items: center;

      .name {
        height: 30px;
        font-size: 30px;
        color: #666666;
      }

      .en {
        margin-left: 7px;
        height: 17px;
        font-size: 22px;
        color: #bfbfbf;
      }
    }

    .line {
      margin-top: 14px;
      width: 1200px;
      height: 1px;
      background: #ee7800;
    }

    .content {
      margin-top: 45px;
      display: flex;
      width: 1200px;
      height: 377px;

      .left {
        cursor: pointer;
        width: 422px;
        height: 100%;
        box-shadow: -4px 3px 32px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;

        .img {
          // width: 422px;
          // height: 240px;
          @include fn.scale(422px);

          border-radius: 5px;
        }

        .left-title {
          margin-top: 34px;
          margin-left: 26px;
          width: 380px;
          line-height: 25px;
          @include fn.title;
        }

        .describe {
          margin-top: 14px;
          margin-left: 26px;
          width: 359px;
          line-height: 22px;
          @include fn.describe(2);
        }
      }

      .center {
        margin-left: 12px;
        width: 244px;
        height: 100%;

        // box-shadow: -4px 3px 32px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .card {
          cursor: pointer;
          width: 244px;
          height: 183px;
          background: #ffffff;
          box-shadow: -4px 3px 32px 0px rgba(0, 0, 0, 0.1);
          border-radius: 5px;

          .img {
            // width: 244px;
            // height: 139px;
            @include fn.scale(244px);
            border-radius: 5px;
          }

          .text {
            margin-left: 17px;
            width: 218px;
            @include fn.title;
          }
        }
      }

      .right {
        overflow: hidden;
        margin-left: 72px;
        width: 421px;
        // height: 310px;
        box-sizing: border-box;
        padding-top: 15px;

        .news {
          height: 62px;

          .text {
            cursor: pointer;
            width: 396px;
            @include fn.title;
          }

          .b-line {
            margin-top: 19px;
            width: 421px;
            border: 1px dashed #eaeaea;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .aboutPc {
    display: none;
  }

  .aboutM {
    display: flex;
    width: fn.rpx(750);
    height: fn.rpx(1158);
    flex-direction: column;
    align-items: center;

    .title {
      margin-top: fn.rpx(60);
      width: fn.rpx(300);
      height: fn.rpx(100);
    }

    .box {
      box-sizing: border-box;
      margin-top: fn.rpx(80);
      width: fn.rpx(700);
      margin-left: fn.rpx(25);
      margin-right: fn.rpx(25);
      // display: flex;
      // flex-direction: column;
      // align-items: center;

      .header {
        height: fn.rpx(40);
        display: flex;
        align-items: center;

        .name {
          font-size: fn.rpx(30);
          font-weight: 400;
          color: #666666;
        }

        .en {
          margin-left: fn.rpx(7);
          font-size: fn.rpx(22);
          font-weight: 400;
          color: #bfbfbf;
        }
      }

      .line {
        margin-top: fn.rpx(14);
        width: 100%;
        height: 1px;
        background: color.$base;
      }

      .content {
        margin-top: fn.rpx(32);
        display: flex;
        width: 100%;
        height: fn.rpx(389);

        .left {
          width: fn.rpx(453);
          height: 100%;
          box-shadow: -4px 3px 32px 0px rgba(0, 0, 0, 0.1);
          background: #fff;
          border-radius: fn.rpx(10);

          .img {
            // width: fn.rpx(435);
            // height: fn.rpx(248);
            @include fn.scale(fn.rpx(435));
            //   background: #000000;

            border-radius: fn.rpx(5);
          }

          .left-title {
            margin-top: fn.rpx(34);
            margin-left: fn.rpx(20);
            width: fn.rpx(400);
            @include fn.title;
            // line-height: fn.rpx(20);
          }

          .describe {
            margin-top: fn.rpx(14);
            margin-left: fn.rpx(26);
            width: fn.rpx(400);
            line-height: fn.rpx(22);
            @include fn.describe(2);
          }
        }

        .center {
          margin-left: fn.rpx(12);
          width: fn.rpx(252);
          height: 100%;

          //  box-shadow: -4px 3px 32px 0px rgba(0, 0, 0, 0.1);
          border-radius: fn.rpx(5);
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .card {
            width: fn.rpx(244);
            height: fn.rpx(190);
            background: #ffffff;
            box-shadow: -4px 3px 32px 0px rgba(0, 0, 0, 0.1);
            border-radius: fn.rpx(5);

            .img {
              // width: fn.rpx(244);
              // height: fn.rpx(114);
              @include fn.scale(fn.rpx(244));
              border-radius: fn.rpx(5);
            }

            .text {
              margin-top: fn.rpx(8);
              margin-left: fn.rpx(17);
              width: fn.rpx(218);
              @include fn.title;
            }
          }
        }
      }

      .right {
        overflow: hidden;

        width: 100%;

        box-sizing: border-box;
        margin-top: fn.rpx(50);

        .news {
          height: fn.rpx(62);

          .text {
            width: 100%;
            @include fn.title;
          }

          .b-line {
            margin-top: fn.rpx(19);
            width: 100%;
            border: 1px dashed #eaeaea;
          }
        }
      }
    }
  }
}
</style>